<template>
    <div class="app-container">
        <div class="page-header">
            <div class="back-button">
                <el-button type="primary" icon="el-icon-back" @click="goBack">返回</el-button>
            </div>
            <h2>员工入职信息核定表列表</h2>
        </div>

        <div class="main-content">
            <div class="filter-container">
                <div class="filter-items">
                    <el-input
                        v-model="listQuery.department"
                        placeholder="请输入部门名称"
                        class="filter-item"
                        prefix-icon="el-icon-office-building"
                        clearable
                        @keyup.enter.native="handleFilter"
                    />
                    <el-input
                        v-model="listQuery.position"
                        placeholder="请输入岗位名称"
                        class="filter-item"
                        prefix-icon="el-icon-user"
                        clearable
                        @keyup.enter.native="handleFilter"
                    />
                    <el-button type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="handleCreate">新增</el-button>
                </div>
                <!-- <div class="filter-buttons">    
                </div> -->
            </div>

            <el-card class="table-card" shadow="hover">
                <el-table
                    v-loading="listLoading"
                    :data="list"
                    element-loading-text="加载中..."
                    border
                    fit
                    highlight-current-row
                    style="width: 100%"
                >
                    <el-table-column label="序号" type="index" width="60" align="center" />
                    <el-table-column label="部门" prop="department" min-width="120" show-overflow-tooltip />
                    <el-table-column label="岗位" prop="position" min-width="120" show-overflow-tooltip />
                    <el-table-column label="招聘经办人" prop="recruitmentAgent" min-width="120" show-overflow-tooltip />
                    <el-table-column label="面试时间" prop="interviewTime" width="180" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.interviewTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="报到时间" prop="reportTime" width="180" align="center">
                        <template slot-scope="{row}">
                            <span>{{ row.reportTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="基本工资" prop="basicSalary" width="120" align="right">
                        <template slot-scope="{row}">
                            <span>{{ row.basicSalary }}元</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="280" fixed="right">
                        <template slot-scope="{row}">
                            <el-button type="primary" size="mini" icon="el-icon-view" @click="handleDetail(row)">
                                详情
                            </el-button>
                            <el-button type="warning" size="mini" icon="el-icon-edit" @click="handleUpdate(row)">
                                编辑
                            </el-button>
                            <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(row)">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination-container">
                    <pagination
                        v-show="total > 0"
                        :total="total"
                        :page.sync="listQuery.page"
                        :limit.sync="listQuery.limit"
                        @pagination="getList"
                    />
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
import { getEmployeeVerificationList, deleteEmployeeVerification } from '@/api/employeeVerification'
import Pagination from '@/components/Pagination'

export default {
    name: 'HedingList',
    components: { Pagination },
    data() {
        return {
            list: null,
            total: 0,
            listLoading: true,
            listQuery: {
                page: 1,
                limit: 10,
                department: undefined,
                position: undefined
            }
        }
    },
    created() {
        this.getList()
    },
    methods: {
        async getList() {
            this.listLoading = true
            try {
                const { data, total } = await getEmployeeVerificationList(this.listQuery)
                this.list = data.data
                this.total = data.total
            } catch (error) {
                console.error('获取列表失败:', error)
            }
            this.listLoading = false
        },
        handleFilter() {
            this.listQuery.page = 1
            this.getList()
        },
        handleCreate() {
            this.$router.push('/main/biao/heding')
        },
        handleDetail(row) {
            this.$router.push({ path: '/main/biao/heding', query: { id: row.id, type: 'view' } })
        },
        handleUpdate(row) {
            this.$router.push({ path: '/main/biao/heding', query: { id: row.id } })
        },
        async handleDelete(row) {
            try {
                await this.$confirm('确认删除该记录吗？', '提示', {
                    type: 'warning'
                })
                await deleteEmployeeVerification(row.id)
                this.$message.success('删除成功')
                this.getList()
            } catch (error) {
                if (error !== 'cancel') {
                    this.$message.error('删除失败')
                }
            }
        },
        goBack() {
            this.$router.push('/main/biao/heding')
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    padding: 16px;
    min-height: calc(100vh - 32px);
    // background-color: #f0f2f5;
    width: 1200px;
    margin: 0 auto;
}

.page-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    position: relative;

    .back-button {
        margin-right: 16px;

        .el-button {
            padding: 7px 12px;
            font-size: 13px;
        }
    }

    h2 {
        font-size: 18px;
        color: #1f2f3d;
        margin: 0;
        font-weight: 600;
        position: relative;
        padding-left: 12px;
        
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 16px;
            background: #409EFF;
            border-radius: 2px;
        }
    }
}

.main-content {
    background: transparent;
    border-radius: 6px;
    padding: 0;
}

.filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    gap: 12px;

    .filter-items {
        display: flex;
        gap: 12px;
        flex: 1;
        justify-content: center;

        .filter-item {
            width: 220px;

            :deep(.el-input__inner) {
                border-radius: 4px;
                height: 32px;
                line-height: 32px;
                font-size: 13px;
            }
        }
    }

    .filter-buttons {
        display: flex;
        gap: 8px;

        .el-button {
            padding: 7px 16px;
            font-size: 13px;
            border-radius: 4px;

            &:hover {
                transform: translateY(-1px);
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            }
        }
    }
}

.table-card {
    margin-bottom: 16px;
    border-radius: 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    
    :deep(.el-card__body) {
        padding: 0;
    }
}

.el-table {
    :deep(th) {
        background-color: #fafafa;
        color: #1f2f3d;
        font-weight: 600;
        height: 40px;
        padding: 8px;
        font-size: 13px;
    }

    :deep(td) {
        padding: 8px;
        font-size: 13px;
    }

    :deep(.el-button) {
        padding: 5px 8px;
        font-size: 12px;
        border-radius: 3px;

        [class^="el-icon-"] {
            margin-right: 4px;
        }
    }

    :deep(.el-button + .el-button) {
        margin-left: 6px;
    }

    :deep(.el-table__row) {
        transition: all 0.2s ease;

        &:hover {
            background-color: #f5f7fa;
            td {
                background-color: transparent;
            }
        }
    }
}

.pagination-container {
    padding: 12px;
    display: flex;
    justify-content: center;
    background: #fff;
    border-top: 1px solid #ebeef5;

    :deep(.el-pagination) {
        padding: 0;
        font-size: 13px;

        .btn-prev,
        .btn-next {
            padding: 0 8px;
            min-width: 28px;
        }

        .el-pager li {
            min-width: 28px;
            padding: 0 8px;
        }
    }
}

@media screen and (max-width: 768px) {
    .app-container {
        padding: 8px;
    }

    .page-header {
        padding: 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;

        .back-button {
            margin-right: 0;
        }

        h2 {
            font-size: 16px;
            padding-left: 10px;

            &::before {
                height: 14px;
            }
        }
    }

    .main-content {
        padding: 0;
    }

    .filter-container {
        padding: 10px;
        flex-direction: column;
        align-items: stretch;

        .filter-items {
            flex-direction: column;
            
            .filter-item {
                width: 100%;
            }
        }

        .filter-buttons {
            justify-content: space-between;

            .el-button {
                flex: 1;
                padding: 6px 12px;
            }
        }
    }

    .table-card {
        margin-bottom: 12px;
    }

    .el-table {
        :deep(.el-button) {
            margin: 2px;
            padding: 4px 6px;
        }
    }

    .pagination-container {
        padding: 8px;
    }
}
</style>